<template>
  <div id="app">
    <div class="doc" ref="doc">
      <transition name="up" v-on:after-leave="afterLeave">
        <Top v-show="start" ref="top"></Top>
      </transition>
      <Main ref="main" :dialogue="dialogue"></Main>
      <Btm ref="bottom" @addHandle="addMain"></Btm>
    </div>
  </div>
</template>



<script>
import odata from "./static/js/data.js";
import Top from "./components/top";
import Main from "./components/main";
import Btm from "./components/btm";




export default {
  name: "App",
  data() {
    return {
      start: true,
      dialogue: [
        {
          type: "robot",
          des: "您好！我是小安，我喜欢<br>回答你的问题",
        },
      ],
      curque: {},
    };
  },

  components: {
    Top,
    Main,
    Btm,
  },
  methods: {
    afterLeave() {
      this.frameChange();
    },
    addMain(data) {
      this.start = false;
      this.curque = {};
      this.curque.type = "woman";
      this.curque.des = data;
      this.dialogue.push(this.curque);
      let that = this;
      that.$nextTick(() => {
        that.frameChange();
        if (that.curque.type == "woman") {
          setTimeout(() => {
            that.answer(data);
          }, 1000);
        }
      });
    },
    //回答
    answer(data) {
      let that = this,has=false;
      if(data.indexOf('爱')>-1){
        that.addMain('我爱，但我真的只能在这里说吗')  
        that.curque.type = "robot"
        return;
      }
      odata.map(function (item) {
        if (data.indexOf(item.que) > -1) {
          has=true
          that.addMain(item.answer);
          that.curque.type = "robot";
          return;
        }
      });


      if(!has){
        that.addMain('抱歉，我只想在微信上告诉你') 
        that.curque.type = "robot"
        return;
      }
    },

    frameChange() {
      this.frameInit();
      this.scrollBottom();
      window.onresize = () => {
        this.frameInit();
        this.scrollBottom();
      };
    },

    //计算并渲染布局Main
    frameInit() {
      let main = this.$refs.main.$el; //获取main dom
      let top = this.$refs.top.$el; //获取top dom
      let bottom = this.$refs.bottom.$el; //获取main dom
      let mheight = window.innerHeight - top.offsetHeight - bottom.offsetHeight; //实时算出Main组件所占高度
      main.style.height = mheight + "px";
    },

    //执行dom.ul滑动到底部
    scrollBottom() {
      let main = this.$refs.main; //获取Main组件
      let ulmain = main.$children[0]; //获取ulmain组件
      let ul = ulmain.$el; //获取ul组件的dom

      ul.scrollTop = ul.scrollHeight; //滑动到内容撑起的最大高度
    },
  },
  mounted() {
    this.frameChange();
  },
};
</script>



<style>
.up-leave-active {
  margin-top: -2rem;
  transition: 0.3s;
}

html,
body {
  height: 100%;
  background: #f5f6fd;
}

#app,
.g-doc {
  width: 7.5rem;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
  background: #f5f6fd;
}
</style>